<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>

    <style>
        body {
            background-image: url('img/paperwall_2.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        .register-container {
            width: 300px;
            margin: 0 auto;
            padding: 30px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .form-group input:focus {
            border-color: #6c63ff;
        }

        .error-message {
            color: red;
            font-size: 12px;
            display: none;
        }

        .success-message {
            color: green;
            font-size: 14px;
            margin-top: 15px;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #6c63ff;
            border: none;
            color: white;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }

        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<div class="register-container">
    <h2>用户注册</h2>
    <form id="registerForm">
        <div class="form-group">
            <label for="userName">用户名</label>
            <input type="text" id="userName" name="userName" required>
            <div id="userNameError" class="error-message"></div>
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" required>
            <div id="emailError" class="error-message"></div>
        </div>
        <div class="form-group">
            <label for="mobile">联系电话</label>
            <input type="text" id="mobile" name="mobile" required>
            <div id="mobileError" class="error-message"></div>
        </div>
        <div class="form-group">
            <label for="address">居住地址</label>
            <input type="text" id="address" name="address" required>
            <div id="addressError" class="error-message"></div>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" required>
            <div id="passwordError" class="error-message"></div>
        </div>
        <div class="form-group">
            <label for="confirmPassword">确认密码</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required>
            <div id="confirmPasswordError" class="error-message"></div>
        </div>
        <button type="submit">注册</button>
        <div id="successMessage" class="success-message"></div>
    </form>
</div>

<script src="Js/jquery.min.3.6.0.js"></script>
<script>
    $(document).ready(function() {
        $('#registerForm').submit(function(e) {
            e.preventDefault();

            // 清除之前的错误信息
            $('.error-message').hide();

            // 获取表单数据
            const userName = $('#userName').val().trim();
            const email = $('#email').val().trim();
            const mobile = $('#mobile').val().trim();
            const address = $('#address').val().trim();
            const password = $('#password').val().trim();
            const confirmPassword = $('#confirmPassword').val().trim();

            // 简单验证
            let isValid = true;

            if (userName === '') {
                $('#userNameError').text('请输入用户名').show();
                isValid = false;
            }

            if (email === '') {
                $('#emailError').text('请输入邮箱').show();
                isValid = false;
            }

            if (mobile === '') {
                $('#mobileError').text('请输入联系电话').show();
                isValid = false;
            }

            if (address === '') {
                $('#addressError').text('请输入居住地址').show();
                isValid = false;
            }

            if (password === '') {
                $('#passwordError').text('请输入密码').show();
                isValid = false;
            } else if (password.length < 6) {
                $('#passwordError').text('密码长度不能少于6位').show();
                isValid = false;
            }

            if (confirmPassword === '') {
                $('#confirmPasswordError').text('请确认密码').show();
                isValid = false;
            } else if (password !== confirmPassword) {
                $('#confirmPasswordError').text('两次密码输入不一致').show();
                isValid = false;
            }

            if (!isValid) {
                return;
            }

            // 准备发送的数据
            const userData = {
                "userName": userName,
                "email": email,
                "mobile": mobile,
                "address": address,
                "password": password
            };

            // 显示加载状态
            $('button[type="submit"]').text('注册中...').prop('disabled', true);

            // AJAX调用后端接口
            $.ajax({
                url: '/sysUser/save', // 后端接口地址
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(userData),
                success: function(response) {
                    // 注册成功处理
                    $('#successMessage').text('注册成功！').show();
                    $('#registerForm')[0].reset();

                    // 3秒后跳转到登录页面
                    setTimeout(function() {
                        window.location.href = './login.html'; // 跳转到登录页面
                    }, 3000);
                },
                error: function(xhr, status, error) {
                    // 错误处理
                    let errorMessage = '注册失败，请重试';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    $('#successMessage').text(errorMessage).css('color', 'red').show();
                },
                complete: function() {
                    // 恢复按钮状态
                    $('button[type="submit"]').text('注册').prop('disabled', false);
                }
            });
        });
    });
</script>
</body>
</html>
